<!--督导结果统计-->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="xq" size="mini" clearable placeholder="请选择学期" @change="selectXQChange()"
          style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in xqList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="月份">
        <el-select v-model="yf" size="mini" clearable placeholder="请选择月份" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in yfList" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="状态">
        <el-select v-model="state" size="mini" clearable placeholder="请选择状态" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in stateList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="40px" label="系">
        <el-select v-model="system" size="mini" clearable placeholder="请选择系" style="margin: 0 20px 0 -15px;"
          @change="handleChangeDepartment">
          <el-option v-for="(item, index) in systemList" :key="index" :label="item.deptName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="70px" label="教研室">
        <el-select v-model="kkjys" size="mini" clearable placeholder="请选择教研室" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in kkjysList" :key="index" :label="system === '' ? item.deptName : item.value"
            :value="system === '' ? item.id : item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="教员名称">
        <el-input v-model="teacherName" size="mini" clearable placeholder="请输入教员名称" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <el-form-item label-width="85px" label="督导专家">
        <el-input v-model="spacia" size="mini" clearable placeholder="请输入督导专家" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <div class="button-style" style="min-width: 75px; margin-top: 6px;" @click="selectGroup">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </el-form>
    <el-table border :data="tableData" style="margin-bottom: 15px;" class="xpaas-table-class"
      row-class-name="xpaas-row-class" cell-class-name="xpaas-cell-class" header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="skrq" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="tkjc" label="听课节次" align="center">
      </el-table-column>
      <el-table-column prop="kcmc" label="课程名称" align="center">
      </el-table-column>
      <el-table-column prop="skjy" label="教员" align="center">
      </el-table-column>
      <el-table-column prop="jxb" label="教学班" align="center">
      </el-table-column>
      <el-table-column prop="cd" label="上课地点" align="center">
      </el-table-column>
      <el-table-column prop="pdfs" label="评价分数" align="center">
      </el-table-column>
      <el-table-column prop="pjdj" label="评价等级" align="center">
      </el-table-column>
      <el-table-column prop="tckr" label="督导专家" align="center">
      </el-table-column>
      <el-table-column width="200" prop="zjpy" label="评语" align="center">
      </el-table-column>
    </el-table>
    <div class="button-style" style="width: auto; border-color: #f3b815; background-color: #fff6ef;">
      <img src="@/assets/assessment/icon-export.png" />
      <download-excel :data="tableData" :fields="jsonFields" type="xls" name="督导结果信息.xls" style="color: #f3b815;">
        <span style="font-size: 14px;">导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="total" style="padding: 0;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { selectGroup, yueGroup } from "@/api/teacher/admin";
import { toSelectDateByTerm } from "@/api/admin1/check";
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
import { getxb, getClass, queryXBclassroom } from '@/api/course/courses'
export default {
  data() {
    return {
      tableChangeFlag: false,
      total: 0,
      size: 10,
      current: 1,
      xq: "",
      xqList: [],
      state: "",
      stateList: [
        {
          value: "已提交",
          label: "已提交"
        },
        {
          value: "暂存",
          label: "暂存"
        }
      ],
      spacia: "",
      system: "",
      systemList: [],
      kkjys: "",
      kkjysList: [],
      room: "",
      roomList: [],
      yf: "",
      yfList: [],
      teacherName: "",
      tableData: [],
      jsonFields: {
        日期: "skrq",
        听课节次: "tkjc",
        课程名称: "kcmc",
        教员: "skjy",
        教学班: "jxb",
        上课地点: "cd",
        评价分数: "pdfs",
        评级登记: "pjdj",
        督导专家: "tckr",
        评语: "zjpy"
      }
    };
  },
  methods: {
    selectGroup() {
      let obj = {};
      (obj.supervisionInfoVO = {
        month: this.yf,
        term: this.xq
      }),
        (obj.query = {
          size: this.size,
          current: this.current
        });
      return new Promise(() => {
        selectGroup(obj).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
      });
    },
    handleCurrentChange(val) {
      this.current = val;
      this.selectGroup();
    },
    handleSizeChange(val) {
      this.size = val;
      this.selectGroup();
    },
    handleChangeDepartment: function (val) {
      debugger
      this.kkjys = ''
      if (val === '') {
        getClass().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.kkjysList = res.data.data
          }
        })
      } else {
        const record = this.systemList.find(item => {
          return item.id === this.system
        })
        queryXBclassroom(record.deptName).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.kkjysList = res.data.data
          }
        })
      }
    },
    selectXQChange() {
      let xq = this.xq
      let xqId = ''
      if (this.xqList.length) {
        for (let i = 0; i < this.xqList.length; i++) {
          if (this.xqList[i].xqmc == xq) {
            xqId = this.xqList[i].id
          }
        }
        if (xqId) {
          toSelectDateByTerm(xqId).then((r) => {
            console.log('哈哈哈哈', r)
            if (r.data.data && r.data.data.length) {
              this.yfList = r.data.data
            }
          })
        } else {
          alert('请选择学期')
        }
      }
    }
  },
  mounted() {
    reqGetXqList().then(res => {
      console.log('加载学期', res)
      if (res.data.code === 200) {
        this.xqList = res.data.data;
        this.xq = this.xqList[0].xqmc
        this.selectXQChange()
        yueGroup({ term: this.xq }).then(res => {
          if (res.data.code === 200) {
            this.yfList = res.data.data
            this.yf = this.yfList[0]
            this.selectGroup()
          }
        })
      }
    })
    getxb().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.systemList = res.data.data
      }
    })
    getClass().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.kkjysList = res.data.data
      }
    })
  }
};
</script>
<style lang="less" scoped>
.button-style {
  float: left;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  width: auto;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  box-sizing: border-box;

  >img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  >span {
    font-size: 14px;
    color: #51aef6;
  }
}

@fontFamily: "Microsoft YaHei";

.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;

  ::v-deep div.el-table__header-wrapper {
    table.el-table__header {
      thead {
        tr.xpaas-header-row-class {
          padding: 0;
          height: 60px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: @fontFamily;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;

          th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }

  ::v-deep div.el-table__body-wrapper {
    table.el-table__body {
      tbody {
        tr.xpaas-row-class {
          td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          td.xpaas-cell-class {
            height: 60px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;

            div.cell {
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}

/deep/ .el-form-item__label {
  color: #004ca7;
  font-size: 14px;
}
</style>
